/* fullLove.css */
*{
  margin: 0;
  padding: 0;
}
body{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  background-color: #fff;
}
.likeBtn{
  width: 50px;
  height: 50px;
  background-color: #fff;
  box-shadow: .4rem .4rem .8rem #c8d0e7,-.4rem -.4rem .8rem #fff;
  border-radius: 50%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items:center;
  cursor: pointer;
}
.heart{
  background-color: #8a93a0;
  height: 13px;
  width: 13px;
  transform: rotate(-45deg) scale(1);
  display: inline-block;
}
.heratPop{
	animation: pulse 1s linear infinite;
}

.heart::before {
	content: '';
	position: absolute;
	top: -50%;
	left: 0;
	background-color: inherit;
	border-radius: 50%;
	height: 13px;
	width: 13px;
}

.heart::after {
	content: '';
	position: absolute;
	top: 0;
	right: -50%;
	background-color: inherit;
	border-radius: 50%;
	height: 13px;
	width: 13px;
}
.hearts {
	position: absolute;
	color: #E7273F;
	font-size: 15px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	animation: fly 3s linear forwards;
}

@keyframes fly {
	to {
		transform: translate(-50%, -50px) scale(0);
	}
}
@keyframes pulse {
	0% {
		transform: rotate(-45deg) scale(1);
	}

	10% {
		transform: rotate(-45deg) scale(1.1);
	}

	20% {
		transform: rotate(-45deg) scale(0.9);
	}

	30% {
		transform: rotate(-45deg) scale(1.2);
	}

	40% {
		transform: rotate(-45deg) scale(0.9);
	}

	50% {
		transform: rotate(-45deg) scale(1.1);
	}

	60% {
		transform: rotate(-45deg) scale(0.9);
	}

	70% {
		transform: rotate(-45deg) scale(1);
	}
}